<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <div class="wk-base-detail">
    <CreateSections v-for="(mainItem, mainIndex) in list" :key="mainIndex"
                    :title="mainItem.name"
                    :dropdown-items="dropdownItems"
                    class="wk-base-detail__section"
                    content-height="auto"
                    @command-select="sectionCommandSelect">
      <WkCustomBaseDetailSection :list="mainItem.list">
        <!--        <template slot="data" slot-scope="{ data }">-->
        <template v-slot:data="{ data }">
          <slot :data="data" name="data"/>
        </template>
      </WkCustomBaseDetailSection>
      <template v-slot:header>
        <div class="wk-base-detail__more">
          <slot name="more"/>
        </div>
      </template>

      <slot/>
    </CreateSections>
  </div>
</template>

<script setup>
// 基本详情
import CreateSections from '/src/components/CreateSections.vue'
import WkCustomBaseDetailSection from './WkCustomBaseDetailSection.vue'


defineOptions({
  name: 'WkCustomBaseDetail',

})
const emits = defineEmits(['top-command-select'])

const props = defineProps({
  list: Array,
  dropdownItems: Array
})

function sectionCommandSelect(type) {
  emits('top-command-select', type)
}

</script>


<style lang="scss" scoped>
.wk-base-detail {
  &__section {
    margin-top: 25px;
  }

  :deep(.create-sections-content) {
    padding: 0 20px;
  }

  &__more {
    position: absolute;
    right: 15px;
  }
}
</style>
